<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 800px;
            margin: 100px auto;
            text-align: center;
        }
        #char{
            color: hotpink;
            font-size: 200px;
        }
        #error{
            color: red;
            display: none;
            margin: 50px 0;
        }
        #result{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="char">H</div>
        <div id="error">输入有误，请重新输入</div>
        <div id="result">请在键盘上按下正确的字母</div>
    </div>
</body>
<script>
    /*
        1.onkeyup 获取的是大写字母的ASCII编码值  A-Z (65-90)
        2.String.fromCharCode(code)将 ASCII编码转换为字母
    
    */
   var charBox = document.getElementById('char');
   var errorBox = document.getElementById('error');
   var resultBox = document.getElementById('result');

    // (1) 随机产生一个 65-90之间的随机数
    function getRandomNum(min,max){
        return Math.floor(Math.random()*(max - min + 1)) + min;
    }

    // (2)将随机产生的 数字转换为字母
    var random = getRandomNum(65,90);  
    var char = String.fromCharCode(random);//将随机数（ASCII）转换为字母
    charBox.innerHTML = char; //显示在页面上


    // (3)键盘弹起时
    var totalCount = 0;
    var rightCount = 0;
    document.onkeyup = function(e){
        console.log(e.keyCode);
        console.log(random);

        totalCount++;//记录总次数
        // 比较(ASCII编码) e.keyCode 与 random
        // 比较(字母) e.key 与 char(注意大小问题)
        
        if (e.keyCode == random) { //输入是正确的

            // 更新页面上的字母
            random = getRandomNum(65,90);
            char = String.fromCharCode(random);
            charBox.innerHTML = char;

            // 隐藏错误提示信息
            errorBox.style.display = 'none';

            rightCount++; //记录正确的次数
            
        } else { //输入错误
            // 显示错误提示信息
            errorBox.style.display = 'block';
        }

        // 计算正确率
        var rightPercent = rightCount / totalCount * 100;
        console.log(rightPercent);
        resultBox.innerHTML = "您当前的正确率为："+ rightPercent.toFixed(2) + '%';
    }
    
    
</script>
</html>